<template>
  <div id="data-preview-table" class="http-data-preview">
    <!-- 单表 -->
    <data-preview-table
      :head="httpDatasetData.head"
      :data="httpDatasetData.data"
      data-type="http"
      :enable-edit-title="false"
      @changeColType="changeColType"
      @change-semantic="changeColSemantic"
      @title-change="(value) => handleTitleChange(value)"
    />
  </div>
</template>

<script lang="ts">
/**
 * http数据预览
 * @author Jinhui Hou
 */
import { Component, Vue } from 'vue-property-decorator'
import DataPreviewTable from '@/components/data/DatasetPreviewTable.vue'
import DataUploadStore from '@/store/modules/data-upload'

@Component({
  components: {
    DataPreviewTable,
  },
})
export default class HttpDataPreview extends Vue {
  // 预览数据
  public get httpDatasetData() {
    return DataUploadStore.httpDatasetData
  }

  /**
   * 脱敏组件修改 是否使用类型/语义推断
   * @param type 数据类型 / 数据语义
   * @param value 是否使用推断
   */
  public toggleTypeSemanticInfer({
    type,
    value,
  }: {
    type: 'type' | 'semantic'
    value: boolean
  }) {
    if (type === 'type') {
      this.usingInferentialTypes(value)
    } else {
      this.usingInferentialSemantics(value)
    }
  }

  /**
   * 修改表是否使用推断类型
   * @param mark
   * @private
   */
  private usingInferentialTypes(mark: boolean) {
    DataUploadStore.httpDatasetData.newHead.forEach(
      (column: any, index: number) => {
        // 推断类型 checkbox 选中， 并且推断语义存在， 使用推断语义， 否则 varchar
        const type: string =
          mark && column.recommendType ? column.recommendType : 'varchar'
        column.type = type
        DataUploadStore.httpDatasetData.head.splice(index, 1, {
          ...DataUploadStore.httpDatasetData.head[index],
          type,
        })
      }
    )
  }

  /**
   * 修改表是否使用推断语义
   * @param mark
   */
  public usingInferentialSemantics(mark: boolean) {
    DataUploadStore.httpDatasetData.newHead.forEach(
      (column: any, index: number) => {
        const semantic: string =
          mark && column.recommendSemantic ? column.recommendSemantic : 'null'
        column.semantic = semantic
        DataUploadStore.httpDatasetData.head.splice(index, 1, {
          ...DataUploadStore.httpDatasetData.head[index],
          semantic,
        })
      }
    )
  }

  /**
   * 修改数据列的类型
   */
  public changeColType(typeInfo: { index: number; type: string }) {
    const { index, type } = typeInfo
    console.log(this.httpDatasetData.newHead[index].type, type)
    if (this.httpDatasetData.newHead[index].type === type) {
      return
    }
    this.httpDatasetData.newHead[index].type = type
    this.httpDatasetData.head[index].type = type
    DataUploadStore.setIsDataTypeInfer(false)
  }

  /**
   * 语义推断与修改
   */
  public changeColSemantic(semanticInfo: { index: number; semantic: string }) {
    const { index, semantic } = semanticInfo
    if (this.httpDatasetData.newHead[index].semantic === semantic) {
      return
    }
    this.httpDatasetData.newHead[index].semantic = semantic
    this.httpDatasetData.head[index].semantic = semantic
    DataUploadStore.setIsDataSemanticInfer(false)
  }

  /**
   * 表头文字调整
   * @param tableIndex:number 第几个列
   */
  public handleTitleChange({
    index: columnIndex,
    newValue,
    oldValue,
  }: {
    index: number
    newValue: string
    oldValue: string
  }) {
    this.httpDatasetData.newHead[columnIndex].name = newValue
    // 处理返回来的数据
    this.httpDatasetData.data = this.httpDatasetData.data.map((item: any) => {
      const newData = {
        ...item,
        [newValue]: item[oldValue],
      }
      delete newData[oldValue]
      return newData
    })
  }
}
</script>
<style lang="less" scoped>
.http-data-preview {
  //max-height: 450px;
}
</style>
